<template>
  <div class="card-list">
    <a-list
      :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
      :dataSource="petBreedList"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="item.add">
          <a-button @click="handleAdd" class="new-btn" type="dashed">
            <a-icon type="plus" />新增品种
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <div
                style="
                  margin-bottom: 3px;
                  display: flex;
                  justify-content: space-between;
                "
                slot="title"
              >
                <span> {{ item.breedName }}</span>
                <span> {{ item.categorName }}</span>
              </div>
              <a-avatar
                class="card-avatar"
                slot="avatar"
                :src="item.breedImg"
                size="large"
              />
              <div class="meta-content" slot="description">
                {{ item.breedDec }}
              </div>
            </a-card-meta>
            <a slot="actions" @click.stop="handleEdit(item)">修改</a>
            <a slot="actions" class="text_red">
              <Popconfirm
                title="确定删除该项？"
                ok-text="确定"
                cancel-text="取消"
                @confirm.stop="handleDel(item.id)"
                >删除
              </Popconfirm>
            </a>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
    <Modal
      title="管理品种"
      maskClosable
      :confirm-loading="confirmLoading"
      :visible="openModal"
      :width="700"
      @ok="handleOk"
      @cancel="openModal = false"
    >
      <BreedForm
        :form="breedForm"
        :categoryList="categoryList"
        @setBreedForm="setBreedForm"
      />
    </Modal>
  </div>
</template>

<script>
import BreedForm from "./Modules/breedForm.vue";
import { Modal, Popconfirm, message } from "ant-design-vue";
import { sleep } from "../../utils/util";
import { v4 as uuidv4 } from "uuid";
import { findIndex, map } from "lodash";

export default {
  name: "CardList",
  components: { Modal, Popconfirm, BreedForm },
  data() {
    return {
      desc: "功能介绍：宠物品种的新增，修改，查看，删除",
      linkList: [
        // { icon: "rocket", href: "/#/", title: "快速开始" },
        // {icon: 'info-circle-o', href: '/#/', title: '产品简介'},
        // {icon: 'file-text', href: '/#/', title: '产品文档'}
      ],
      // extraImage: "https://p19.qhimg.com/bdr/__85/t0144cb6583daac7389.jpg",
      petBreedList: JSON.parse(localStorage.getItem("petBreedList")) || [
        {
          add: true,
        },
      ],
      confirmLoading: false,
      openModal: false,
      breedForm: {
        breedName: "",
        categorName: "",
        breedImg:
          "https://img.zcool.cn/community/01e3d35b06bf80a801218cf4079251.jpg",
        breedDec: "",
      },
      categoryList:
        map(
          JSON.parse(localStorage.getItem("petCategoryList")),
          ({ id, title }) => ({
            id,
            title,
          })
        ) || [],
    };
  },
  methods: {
    handleAdd() {
      this.breedForm = {
        breedImg:
          "https://img.zcool.cn/community/01e3d35b06bf80a801218cf4079251.jpg",
      };
      this.categoryList =
        map(
          JSON.parse(localStorage.getItem("petCategoryList")),
          ({ id, title }) => ({
            id,
            title,
          })
        ) || [];
      this.openModal = true;
    },
    handleEdit({ id, breedName, categorName, breedImg, breedDec }) {
      this.openModal = true;
      this.breedForm = {
        id,
        breedName,
        categorName,
        breedImg,
        breedDec,
      };
    },
    handleDel(id) {
      const index = findIndex(this.petBreedList, (l) => l.id === id);
      this.petBreedList.splice(index, 1);
      this.updateLo();
    },
    async handleOk() {
      this.confirmLoading = true;
      try {
        this.verification();
        const { breedName, categorName, breedImg, breedDec, id } =
          this.breedForm;
        await sleep(800);
        const data = {
          id: uuidv4(),
          breedName,
          categorName,
          breedImg,
          breedDec,
        };
        if (id) {
          const index = findIndex(this.petBreedList, (l) => l.id === id);
          this.petBreedList[index] = data;
        } else {
          this.petBreedList.splice(1, 0, data);
        }
        message.success("新增成功");
        this.updateLo();
        this.openModal = false;
      } finally {
        this.confirmLoading = false;
      }
    },
    setBreedForm({ type, value }) {
      this.breedForm[type] = value;
    },
    verification() {
      const { breedName, categorName, breedImg, breedDec } = this.breedForm;
      if (!breedName || !categorName || !breedImg || !breedDec) {
        message.error("请填写完整信息");
        throw new Error("请填写完整信息");
      }
    },
    updateLo() {
      localStorage.setItem("petBreedList", JSON.stringify(this.petBreedList));
    },
  },
};
</script>

<style lang="less" scoped>
.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}

.new-btn {
  border-radius: 2px;
  width: 100%;
  height: 187px;
}

.meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 64px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.text_red {
  color: #ed6f6f !important;
}
</style>
